<template>
    <Layout :showHome="true" :showBtn="true" title="考勤查看">
        <div class="mine">
            <span>我的考勤:</span>
            <div class="info">
                <div class="toux"></div>
                <div class="normal">
                    <p class="name">{{info.name}}</p>
                    <p class="days">当月正常出勤: 15 天</p>
                </div>
                <div class="diff">
                    <p>当月异常出勤:  0 天</p>
                </div>
            </div>
        </div>
        <div class="subordinate">
            <span>下属考勤:</span>
            <div class="scroll">
                <div class="item" v-for="it in list" :key="it.id" >
                    <div :class="['toux',it.className]"></div>
                    <div class="normal">
                        <p class="name">{{it.name}}</p>
                        <p class="days">当月正常出勤: {{it.normal}} 天</p>
                    </div>
                    <div class="diff">
                        <p>当月异常出勤:  {{it.diff}} 天</p>
                    </div>
                </div>
            </div>        
        </div>
    </Layout>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { deCodeApi } from '../../utils'
    let info=reactive({})
    info=JSON.parse(deCodeApi(sessionStorage.getItem('userInfo')))
    const list =ref([
        {id:0,name:'陈霞',normal:15,diff:0,className:'chenXia'},
        {id:0,name:'邹回',normal:14,diff:1,className:'zouHui'},
        {id:0,name:'齐迎雪',normal:13,diff:2,className:'qiYingXue'},
        {id:0,name:'韩信',normal:12,diff:3,className:'hanXin'},
        {id:0,name:'胡锦州',normal:11,diff:2,className:'huJinZhou'},
    ])
</script>
<style lang="less" scoped>
    .chenXia{
        background: url('../../images/toux2.png') center center/64px 64px no-repeat !important;
    }
    .zouHui{
        background: url('../../images/toux3.png') center center/64px 64px no-repeat !important;
    }
    .qiYingXue{
        background: url('../../images/toux4.png') center center/64px 64px no-repeat !important;
    }
    .hanXin{
        background: url('../../images/toux5.png') center center/64px 64px no-repeat !important;
    }
    .huJinZhou{
        background: url('../../images/toux6.png') center center/64px 64px no-repeat !important;
    }
    .mine{
        width: 100vw;
        height: 23vh;
        font-size: .8rem;
        span{
           line-height: 8vh;
           margin-left: 5vw; 
           color: grey;
        }
        .info{
            width: 95vw;
            height: 16vh;
            margin: auto;
            background-color: white;
            display: flex;
            flex-wrap: nowrap;
            font-size: .7rem;
            .toux{
                width: 64px;
                height: 64px;
                margin: auto 2vw ; 
                border-radius: 50%;
                background: url('../../images/toux1.png') center center/64px 64px no-repeat;
            }
            .normal{
                width: 38vw;
                margin-left: 2vw;
                .days{
                    width: 35vw;
                    height: 2vh;
                    color: gray;
                    line-height: 2vh;
                    border-right: 1px solid gray;
                    margin-top: 3.5vh;
                }
                .name{
                    width: 35vw;
                    height: 4vh;
                    color: black;
                    line-height:7vh ;
                }
            }
            .diff{
                width: 38vw;
                p{
                    width: 35vw;
                    height: 2vh;
                    color: gray;
                    line-height: 2vh;
                    margin-top: 9.6vh;
                    margin-left: 2vw;
                }
            }
        } 
    }
    .subordinate{
        width: 100vw;
        height: 70vh;
        font-size: .8rem;
        span{
           line-height: 8vh;
           margin-left: 5vw; 
           color: grey;
        }
        .scroll{
            width: 100vw;
            height:60vh ;
            overflow-y: scroll;
                .item{
                width: 95vw;
                margin: 2vh auto;
                background-color: white;
                height: 16vh;
                display: flex;
                flex-wrap: nowrap;
                font-size: .7rem;
                    .toux{
                    width: 64px;
                    height: 64px;
                    margin: auto 2vw ; 
                    border-radius: 50%;
                    background: url('../../images/toux1.png') center center/64px 64px no-repeat;
                    
                }
                .normal{
                    width: 38vw;
                    margin-left: 2vw;
                    .days{
                        width: 35vw;
                        height: 2vh;
                        color: gray;
                        line-height: 2vh;
                        border-right: 1px solid gray;
                        margin-top: 3.5vh;
                    }
                    .name{
                        width: 35vw;
                        height: 4vh;
                        color: black;
                        line-height:7vh ;
                    }
                }
                .diff{
                    width: 38vw;
                    p{
                        width: 35vw;
                        height: 2vh;
                        color: gray;
                        line-height: 2vh;
                        margin-top: 9.6vh;
                        margin-left: 2vw;
                    }
                }
            } 
        }
        
    }
</style>